<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>借书记录</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
	<!--搜索组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">书名</label>
							<div class="layui-input-inline">
								<input type="text" name="bookname" id="bookname" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">ISBN</label>
							<div class="layui-input-inline">
								<input type="text" name="isbn" id="isbn" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">作者</label>
							<div class="layui-input-inline">
								<input type="text" name="wirter" id="wirter" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline" style="width: 450px">
							<label class="layui-form-label">借书时间</label>
								<div class="layui-input-inline">
									<input type="text" style="width: 300px"  name="borrowtime" class="layui-input" id="borrowtime" placeholder=" - ">
								</div>
						</div>
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="borrow-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	<!--信息显示表格组件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="borrow-table" lay-filter="borrow-table"></table>
			</div>
		</div>
	<div style="display: none" id="historydetail">
		<form class="layui-form" action="">
			<div class="mainBox">
				<div class="main-container">
					<table border="1" cellpadding="0">
						<thead align="center">
						<td >书名</td>
						<td>借书时间</td>
						<td>最后还书时间</td>
						<td>作者</td>
						<td>类别</td>
						<td>借书人</td>
						</thead>
						<tbody align="center">
						<td width="80" id="bookname1"></td>
						<td width="180" id="borrowtime1"></td>
						<td width="180" id="returntime1"></td>
						<td width="80" id="wirter1"></td>
						<td width="80" id="categary1"></td>
						<td width="100" id="jieshuren"></td>
						</tbody>
					</table>
				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-submit lay-filter="huanshu-query">
						还书
					</button>
					<button id="close" type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="">
						<i class="layui-icon layui-icon-close"></i>
						关闭
					</button>
				</div>
			</div>
		</form>
	</div>
	<!--查看详情组件-->
		<script type="text/html" id="user-bar">
			 <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="detail"><i class="layui-icon layui-btn-radius"></i>详情</button>
		</script>
		<!--日期格式化组件-->
		<script type="text/html" id="user-createTime">
			{{layui.util.toDateString(d.borrowtime, 'yyyy-MM-dd')}}
		</script>

		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>



			layui.use(['table', 'form', 'jquery','common','laydate'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
                var laydate = layui.laydate;
				let MODULE_PATH = "operate/";
				let cols = [
					[
						{
							title: '书名',
							field: 'bookname',
							align: 'center',
							templet: '<div>{{d.book.bookname}}</div>'
						},
						{
							title: '出版社',
							field: 'publish',
							align: 'center',
							templet: '<div>{{d.book.publish}}</div>'
						},
						{
							title: '作者',
							field: 'wirter',
							align: 'center',
							templet: '<div>{{d.book.wirter}}</div>'
						},
						{
							title: '位置信息',
							field: 'position',
							align: 'center',
							templet: '<div>{{d.book.position}}</div>'
						},
                        {
                            title: '借书时间',
                            field: 'borrowtime',
                            align: 'center',
							sort: true,
							templet: '#user-createTime',
                        },
						{
							title: '借书人',
							field: 'username',
							align: 'center',
							templet: '<div>{{d.artical.username}}</div>'
						},
						{
							title: '操作',
							toolbar: '#user-bar',
							align: 'center'
						}
					]
				]



				laydate.render({
					elem: '#borrowtime' //指定元素
				});

				//查找监控提交
				form.on('submit(borrow-query)', function (data) {
					var created = data.field.borrowtime;
					if (created != "") {
						created = new Date(created);
						data.field.borrowtime = created;
					}
					else
						delete  data.field.borrowtime
					// console.log(created);
					data.field.page=1;
					data.field.limit=5;
					$ = layui.jquery
					$.ajax({
						url: "http://localhost/jieyuelist",
						data: data.field,
						dataType: "json",
						type: "GET",
						success: function (d) {

							table.reload('borrow-table', {
								where: { //设定异步数据接口的额外参数，任意设
									bookname: data.field.bookname
									, isbn: data.field.isbn
									, wirter: data.field.wirter
									,borrowtime:data.field.borrowtime
								}
								, page: {
									curr: 1 //重新从第 1 页开始
								}
							}); //只重载数据
						}
					})

					console.log(data.field)
					// layer.alert(JSON.stringify(data.field), {
					//     title: '最终的提交信息'
					// })
					return false;
				});



				table.render({
					elem: '#borrow-table',
					url: 'http://localhost/jieyuelist/'+JSON.parse(localStorage.getItem("user")).data.id,
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#user-toolbar',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
				});

				table.on('tool(borrow-table)', function(obj) {
					if (obj.event === 'detail') {
						window.detail(obj);
					} else if (obj.event === 'edit') {
						window.edit(obj);
					}
				});

				table.on('toolbar(borrow-table)', function(obj) {
					if (obj.event === 'add') {
						window.add();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});



				window.detail = function(obj) {
					var data = obj.data //获得当前行数据
							,layEvent = obj.event; //获得 lay-event 对应的值
					var form = layui.form;
					$.post('http://localhost/jieyuelist/'+data.borid,{}, function(str){
						layer.open({
							type: 1,
							title: '详情',
							shade: 0.1,
							area: [common.isModile()?'100%':'600px', common.isModile()?'100%':'200px'],
							content: $('#historydetail')
						});
						$("#bookname1").text(str.data.bookname)
						var borrowtime = layui.util.toDateString(str.data.borrowtime, 'yyyy-MM-dd HH:mm:ss');
						 $("#borrowtime1").text(borrowtime)
						var returntime = layui.util.toDateString(str.data.returntime, 'yyyy-MM-dd HH:mm:ss');
						$("#returntime1").text(returntime)
						$("#jieshuren").text(str.data.username)
						$("#wirter1").text(str.data.wirter)
						$("#categary1").text(str.data.categary)
						$("#id")


					});



                    var x=data.borid
                    console.log(data.book.id)
                    console.log(data.borid)
					form.on('submit(huanshu-query)', function(data){

                        $.ajax({
                            type:"POST",
                            url: "http://localhost/huanshu",
                            datatype: "json",
                            data:{"id":x},
							success:function (d) {
                                layer.closeAll();

                            }
						})

					});
				}
                //日期时间范围
                laydate.render({
                    elem: '#test10'
                    ,type: 'datetime'
                    ,range: true
                });

				window.refresh = function(param) {
					table.reload('borrow-table');
				}
			})
		</script>
	</body>
</html>
